<!--
 * @Author: 项目组
 * @Description: 医嘱设置 - 双Tab主页面（医嘱规则设置 / 医嘱执行时间）
-->
<template>
  <navbar />
  <div class="main-container medical-order-rule-settings">
    <el-card class="tabs-card">
      <el-tabs v-model="activeTab" class="rule-tabs">
        <!-- Tab1：医嘱规则设置 -->
        <el-tab-pane label="医嘱规则设置" name="orderRule">
          <div class="settings-container">
            <el-form :model="ruleForm" label-width="160px" class="settings-form">
              <!-- 下达规则 -->
              <div class="section-title">下达规则</div>
              <el-form-item label="住院补开医嘱">
                <!-- 开启补开医嘱 -->
                <div class="inline-row">
                  <el-checkbox v-model="ruleForm.supplementEnabled">开启</el-checkbox>
                  <span class="tip-text">开启后，住院医生站可使用“补开医嘱”功能下达过去时间的医嘱</span>
                  <!-- 悬浮提示：按要求展示三条说明文字-->
                  <el-tooltip placement="bottom" effect="light" :show-after="120" teleported>
                    <template #content>
                      <div class="tooltip-content">
                        <!-- 1：补开医嘱说明 -->
                        <div>1. 补开医嘱时医生可以选择过去时间作为开始时间，核对后将补过去时间的医嘱任务供护士执行</div>
                        <!-- 2：药品医嘱说明 -->
                        <div>2. 药品医嘱核对后可正常发药，如果药房判断已经发过药可以设置药品为“无需发药”的状态</div>
                        <!-- 3：检查检验说明 -->
                        <div>3. 检查检验医嘱核对后将不会再次生成检查检验申请单，执行后直接计费</div>
                      </div>
                    </template>
                    <el-button size="small">补开医嘱规则</el-button>
                  </el-tooltip>
                </div>
              </el-form-item>

              <!-- 执行规则 -->
              <div class="section-title">执行规则</div>
              <el-form-item label="药品医嘱执行策略">
                <!-- 单选：纵向排列，每行一个 -->
                <el-radio-group v-model="ruleForm.executeStrategy" class="radio-group-vertical">
                  <el-radio label="verify">
                    核对后可执行
                    <span class="radio-desc">（完成医嘱核对后可直接执行）</span>
                  </el-radio>
                  <el-radio label="after_dispense">
                    发药后可执行
                    <span class="radio-desc">（需要药房完成发药后才能执行）</span>
                  </el-radio>
                </el-radio-group>
              </el-form-item>

              <!-- 保存按钮 -->
              <div class="save-section">
                <el-button type="primary" :loading="saveLoading" @click="handleSaveRule">保存</el-button>
              </div>
            </el-form>
          </div>
        </el-tab-pane>

        <!-- Tab2：医嘱执行时间 -->
        <el-tab-pane label="医嘱执行时间" name="execTime">
          <div class="settings-container">
            <el-table
              :data="execTimeList"
              stripe
              border
              style="width: 100%"
              v-loading="execTimeLoading"
              @row-click="openEdit"
            >
              <el-table-column prop="frequencyCode" label="频率" width="140" align="center" />
              <el-table-column prop="frequencyDetail" label="" width="140" align="center" />
              <el-table-column prop="defaultExecutionTime" label="默认执行时间" min-width="300" align="left" />
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 弹窗：执行时间配置 -->
    <ExecTimeConfigDialog v-model:visible="editVisible" :record="editingRecord" @save="handleSaveExecTime" />
  </div>
</template>

<script setup name="MedicalOrderRuleSettings">
// 组合式API
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
// 接口调用
import { getExecTimes, updateExecTime } from '@/api/baseinfo/medicalOrder'
// mock 接口（与现有模块风格一致）
import { mockMedicalOrderApi } from '@/mock/medicalOrder'
// 弹窗组件
import ExecTimeConfigDialog from './components/ExecTimeConfigDialog.vue'

const proxy = getCurrentInstance().proxy

// 当前激活的Tab
const activeTab = ref('orderRule')

// 规则设置表单
const saveLoading = ref(false)
const ruleForm = reactive({
  supplementEnabled: false, // 是否开启补开医嘱
  executeStrategy: 'verify', // 执行策略：核对后可执行 / 发药后可执行
  supplementMaxDays: 7 // 允许补开最大天数（由弹窗配置）
})

// 执行时间列表
const execTimeLoading = ref(false)
const execTimeList = ref([])
// 编辑弹窗状态
const editVisible = ref(false)
const editingRecord = ref({})

// 加载规则设置
const loadRuleSettings = () => {
  const res = mockMedicalOrderApi.getRuleSettings()
  if (res.code === 200) {
    const data = res.data
    ruleForm.supplementEnabled = !!data.supplementEnabled
    ruleForm.executeStrategy = data.executeStrategy || 'verify'
  }
}

// 保存规则设置（包含基础校验）
const handleSaveRule = async () => {
  try {
    // 表单校验：当开启补开时，最大天数须为正整数
    if (ruleForm.supplementEnabled) {
      if (!Number.isInteger(ruleForm.supplementMaxDays) || ruleForm.supplementMaxDays <= 0) {
        proxy.$modal.notifyWarning('允许补开的最大天数必须为正整数')
        return
      }
    }
    const payload = {
      supplementEnabled: ruleForm.supplementEnabled,
      executeStrategy: ruleForm.executeStrategy
    }
    saveLoading.value = true
    const res = mockMedicalOrderApi.saveRuleSettings(payload)
    if (res.code === 200) {
      proxy.$modal.notifySuccess(res.message || '保存成功')
    } else {
      proxy.$modal.notifyWarning(res.message || '保存失败')
    }
  } catch (error) {
    console.error('保存医嘱规则失败:', error)
    proxy.$modal.notifyWarning('保存医嘱规则失败')
  } finally {
    saveLoading.value = false
  }
}

// 加载执行时间列表
const loadExecTimes = async () => {
  execTimeLoading.value = true
  try {
    const res = await getExecTimes()
    if (res.code === 200) {
      execTimeList.value = res.data
    }
  } finally {
    execTimeLoading.value = false
  }
}

// 打开编辑弹窗
function openEdit(row) {
  if (row.frequencyCode === 'st') return
  editingRecord.value = { ...row }
  editVisible.value = true
}

// 保存默认执行时间（本地更新列表）
async function handleSaveExecTime(payload) {
  if (payload?.error) {
    proxy.$modal.notifyWarning(payload.error)
    return
  }
  // 调用接口更新执行时间配置
  const res = await updateExecTime(payload)
  if (res.code === 200) {
    loadExecTimes()
    proxy.$modal.notifySuccess('已更新默认执行时间')
  } else {
    proxy.$modal.notifyWarning(res.message || '更新默认执行时间失败')
  }
}

// 组件挂载后加载数据
onMounted(() => {
  loadRuleSettings()
  loadExecTimes()
})
</script>

<style lang="scss" scoped>
.medical-order-rule-settings {
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    .page-title {
      font-size: 18px;
      font-weight: 600;
    }
  }

  .tabs-card {
    .rule-tabs {
      --el-tabs-header-height: 40px;
    }
  }

  .settings-container {
    padding: 8px 4px 16px;

    .section-title {
      margin: 4px 0 12px;
      font-weight: 600;
      font-size: 14px;
    }

    .inline-row {
      display: inline-flex;
      align-items: center;
      gap: 12px;
    }

    .tip-text {
      color: var(--el-text-color-secondary);
    }

    .helper-text {
      margin-left: 8px;
      color: var(--el-text-color-secondary);
      font-size: 12px;
    }

    // 悬浮提示内容样式：提升阅读性，保持与页面风格一致
    .tooltip-content {
      max-width: 520px; // 控制提示宽度，避免过长
      line-height: 1.6; // 提升可读性
      color: var(--el-text-color-regular); // 正常文字颜色
    }

    .save-section {
      margin-top: 16px;
      text-align: left;
    }
  }

  // 单选项纵向排列，每行一个
  .radio-group-vertical {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    :deep(.el-radio) {
      margin-right: 0;
    }
  }

  // 括号说明浅灰色，选中态保持浅灰（与现有模块一致）
  :deep(.el-radio__label .radio-desc) {
    color: var(--el-text-color-secondary);
  }
  :deep(.el-radio.is-checked .el-radio__label .radio-desc) {
    color: var(--el-text-color-secondary) !important;
  }
}
</style>
